<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <title>Document</title>
    <style>
      .bigbox {
        position: relative;
        width: 600px;
        height: 300px;
        background-color: rgb(122, 189, 22);
      }
      nav ul {
        list-style: none;
        display: flex;
        width: 600px;
        height: 50px;
        padding: 0;
        margin: 0;
      }
      nav ul li {
        width: 100px;
        height: 50px;
        background-color: rgb(224, 224, 224);
        text-align: center;
        line-height: 50px;
        transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
      }
      nav ul li a {
        color: rgb(101, 101, 101);
        text-decoration: none;
        display: block; /* 使链接占满整个li */
      }
      .content {
        position: absolute;
        left: 0;
        width: 600px; /* 每个content的宽度应与.bigbox一致 */
        height: 250px;
        color: white;
        text-align: center;
        line-height: 250px;
        transition: left 0.5s;
        display: none; /* 初始时不显示content */
      }
      /* 添加选中的li样式 */
      .active {
        background-color: transparent;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="bigbox">
      <nav>
        <ul>
          <li class="active" data-content-index="0"><a href="#">tab1</a></li>
          <li data-content-index="1"><a href="#">tab2</a></li>
          <li data-content-index="2"><a href="#">tab3</a></li>
          <li data-content-index="3"><a href="#">tab4</a></li>
          <li data-content-index="4"><a href="#">tab5</a></li>
        </ul>
      </nav>
      <div class="content" style="display: block">1111</div>
      <div class="content">2222</div>
      <div class="content">3333</div>
      <div class="content">4444</div>
      <div class="content">5555</div>
    </div>
    <script>
      $("nav ul li").click(function (e) {
        e.preventDefault(); // 阻止链接默认行为
        // 移除其他li的active类
        $("nav ul li").removeClass("active");
        $(this).addClass("active");
        var index = $(this).data("content-index");
        $(".content").hide();
        $(".content").eq(index).show();
      });
      // 初始化当前显示的content索引
      var currentIndex = 0;
      $(document).ready(function () {
        // 默认显示第一个content
        $(".content").eq(currentIndex).show();
        $("nav ul li").eq(currentIndex).addClass("active");
        // 设置定时器
        setInterval(function () {
          var nextIndex = (currentIndex + 1) % $(".content").length;
          currentIndex = nextIndex;

          switchContent(nextIndex);
        }, 3000);
      });

      // 切换到指定索引的content的函数
      function switchContent(index) {
        $("nav ul li").removeClass("active");
        $("nav ul li").eq(index).addClass("active");
        // 隐藏所有content
        $(".content").hide();
        // 显示对应的content
        $(".content").eq(index).show();
      }

      // 处理导航项点击事件
      $("nav ul li").click(function (e) {
        e.preventDefault();
        var index = $(this).data("content-index");
        switchContent(index);
        // 清除定时器，防止在手动切换时继续自动轮播
        clearInterval(window.intervalId);
      });
    </script>
  </body>
</html>
